<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlashBee-Short-Url 短链接</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/layui/css/index.css">
    <script src="/layui/js/jquery-3.7.1.min.js"></script>
    <script src="/layui/js/sweetalert.min.js"></script>
    <link rel="icon" href="/images/favicon.ico">
</head>
<body>
<div id="wrapper">
    <div id="nav">
        <h1>FlashBee-Short-Url 短链接</h1>
        <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/access">密钥</a></li>
            <li><a href="/api" target="_blank">Api</a></li>
        </ul>
    </div>

    <div id="content">
        <h2>简单、优雅的短链接工具</h2>
        <div class="layui-form-item">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入网址：http://xxx.com"
                   autocomplete="off" class="layui-input" id="url">
        </div>
        <div id="generateUrl"><p id="generateUrlText"></p>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="copy">复制</button>
        </div>
        <div class="layui-form-item">
            <button type="button" class="layui-btn layui-btn-fluid" id="generate">生成短链接</button>
        </div>
    </div>
    <div id="tips">
        <h4>注意事项：</h4>
        <ul>
            <li>1.这里仅可以生成测试短链接，请勿用到线上项目。</li>
            <li>2.所有的长连接，应该以https、http开头，确保长连接是正确的url格式。</li>
            <li>3.请勿将短链接网址，密码传播。</li>
        </ul>
    </div>
</div>
<input type="text" id="copytext">
<script>
    $("#generate").click(function () {
        $("#generateUrlText").html("请等待，正在生成中...");
        let url = $("#url").val();
        $.ajax({
            url: "/generateDemo",
            type: "GET",
            data: {
                url
            },
            success: function (res) {
                if (res.code === 200) {
                    $("#generateUrlText").html(res.data.url);
                } else {
                    swal("",res.message, "error")
                }
            }
        })
    })
    $("#copy").click(function () {
        var text = $("#generateUrlText").html();
        var input = $("#copytext");
        input.val(text); // 修改文本框的内容
        input.select(); // 选中文本
        document.execCommand("copy"); // 执行浏览器复制命令
        swal({
            text: "复制成功",
        });
    })
</script>
<script src="/layui/layui.js"></script>
</body>
</html>